<template>
  <div>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="退租物业交割单" name="first">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
          <el-form-item label="收房合同号" prop="id">
            <el-input v-model="ruleForm.id" style="width: 250px" disabled></el-input>
            <el-button type="warning" @click="chaxun()">收房合同查询</el-button>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="收房合同编号" prop="cfContractNo">
                <el-input v-model="ruleForm.sfContractNo" style="width: 250px" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="房产信息" prop="houseName">
                <el-input v-model="ruleForm.houseName" style="width: 250px" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="产权地址" prop="cqAddress">
                <el-input v-model="ruleForm.cqAddress" style="width: 250px" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="房产证书编号" prop="houseZsNo">
                <el-input v-model="ruleForm.houseZsNo" style="width: 250px" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="业主姓名" prop="ownerName">
                <el-input v-model="ruleForm.ownerName" style="width: 250px" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="业主联系方式" prop="ownerMobile">
                <el-input v-model="ruleForm.ownerMobile" style="width: 250px" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="签约人姓名" prop="signUserName">
                <el-input v-model="ruleForm.signUserName" style="width: 250px" disabled></el-input>
              </el-form-item>

            </el-col>
            <el-col :span="12">
              <el-form-item label="签约人电话" prop="signUserMobile">
                <el-input v-model="ruleForm.signUserMobile" style="width: 250px" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="物业交割日期" prop="wyjgDate">
                <el-date-picker
                  v-model="ruleForm.wyjgDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="解约类型" prop="terminationType">
                <el-select
                  v-model="ruleForm.terminationType"
                  clearable
                  size="small"
                  style="width: 250px"
                >
                  <el-option
                    label="合同到期"
                    :value="1"
                  />
                  <el-option
                    label="业主提前解约"
                    :value="2"
                  />
                  <el-option
                    label="我方退租解约"
                    :value="3"
                  />
                  <el-option
                    label="其他"
                    :value="4"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>






          <div class="spans">
            <el-row>
              <b>应退</b>
            </el-row>
            <el-row>
              <el-col :span="6"><b>类型</b></el-col>
              <el-col :span="6"><b>金额（元）</b></el-col>
              <el-col :span="6"><b>备注</b></el-col>
              <el-col :span="6"><b>操作 &nbsp;&nbsp;<el-button height="14" width="14" style="margin-left: 20px" @click="addDomain" class="el-icon-circle-plus-outline" ></el-button></b></el-col>
            </el-row>
            <el-row>
              <el-form-item
                v-for="(domain, index) in sfs1"
                :key="domain.key"
                :prop="'sfs1.' + index + '.value'">
                <el-col :span="6">
                  <el-select v-model="domain.itemType" placeholder="请选择退费类型">
                    <el-option
                      label="违约金"
                      value="1">
                    </el-option>
                    <el-option
                      label="租金"
                      value="2">
                    </el-option>
                    <el-option
                      label="水费"
                      value="3">
                    </el-option>
                    <el-option
                      label="电费"
                      value="4">
                    </el-option>
                    <el-option
                      label="煤气/煤气"
                      value="5">
                    </el-option>
                    <el-option
                      label="有线电视费"
                      value="6">
                    </el-option>
                    <el-option
                      label="其它费用"
                      value="7">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="6"><el-input v-model="domain.amount" @change="returnpriceCount(domain.amount,index)" placeholder="0.00"></el-input></el-col>
                <el-col :span="6"><el-input v-model="domain.detailRemark" placeholder="备注"></el-input></el-col>
                <el-col :span="6"><el-button height="14" width="14" style="margin-left: 20px" @click="removeDomain(domain)" class="el-icon-remove-outline" ></el-button></el-col>
              </el-form-item>
            </el-row>
          </div>
          <br>
          <br>
          <div class="spans">
            <el-row>
              <b>应收</b>
            </el-row>
            <el-row>
              <el-col :span="6"><b>类型</b></el-col>
              <el-col :span="6"><b>金额（元）</b></el-col>
              <el-col :span="6"><b>备注</b></el-col>
              <el-col :span="6"><b>操作 &nbsp;&nbsp;<el-button height="14" width="14" style="margin-left: 20px" @click="addDomains" class="el-icon-circle-plus-outline" ></el-button></b></el-col>
            </el-row>
            <el-row>
              <el-form-item
                v-for="(domain, index) in sfs2"
                :key="domain.key"
                :prop="'sfs2.' + index + '.value'">
                <el-col :span="6">
                  <el-select v-model="domain.itemType" placeholder="请选择收费类型">
                    <el-option
                      label="违约金"
                      value="1">
                    </el-option>
                    <el-option
                      label="租金"
                      value="2">
                    </el-option>
                    <el-option
                      label="水费"
                      value="3">
                    </el-option>
                    <el-option
                      label="电费"
                      value="4">
                    </el-option>
                    <el-option
                      label="煤气/煤气"
                      value="5">
                    </el-option>
                    <el-option
                      label="有线电视费"
                      value="6">
                    </el-option>
                    <el-option
                      label="其它费用"
                      value="7">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="6"><el-input v-model="domain.amount" @change="getpriceCount(domain.amount,index)" placeholder="0.00"></el-input></el-col>
                <el-col :span="6"><el-input v-model="domain.detailRemark" placeholder="备注"></el-input></el-col>
                <el-col :span="6"><el-button height="14" width="14" style="margin-left: 20px" @click="removeDomains(domain)" class="el-icon-remove-outline" ></el-button></el-col>
              </el-form-item>
            </el-row>
          </div>


          <!--      计算差价    -->
          <el-form-item style="margin-left: 700px">
            合计
            <span v-if="flag==1">(应退)：{{Math.abs(resultPrice)}}</span>
            <span v-if="flag==2">(应收)：{{Math.abs(resultPrice)}}</span>元
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">取消</el-button>
            <!--            <el-button @click="print('ruleForm')">生成合同</el-button>-->
            <el-button @click="resetForm('ruleForm')">下一步</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane >

      <el-tab-pane label="解约协议" name="second" disabled>
        <div class="two">
          <div class="top">
            <h4><i></i>解约合同</h4>
          </div>
          <hr>

          <div class='imgStorage'>
            <el-upload
              class="avatar-uploader"
              action="http://localhost/dev-api/file/file/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>


          <div class="top">
            <h4><i></i>物业交割单</h4>
          </div>
          <div class='imgStorage'>
            <el-upload
              class="avatar-uploader"
              action="http://localhost/dev-api/file/file/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess2">
              <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <div class="top">
            <h4><i></i>其他</h4>
          </div>
          <div class='imgStorage'>
            <el-upload
              class="avatar-uploader"
              action="http://localhost/dev-api/file/file/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess3">
              <img v-if="imageUrl3" :src="imageUrl3" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
        <hr>
        <el-button @click="shangForm()">上一步</el-button>
        <el-button @click="baocun()">保存</el-button>
      </el-tab-pane>


      <el-dialog title="收房合同查询" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-row>
            <el-col :span="12">
              <el-form-item label="小区名称">
                <el-input
                  v-model="form.premiseName"
                  placeholder="请输入小区名称"
                  clearable
                  size="small"
                  style="width: 200px"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="业主名称" >
                <el-input
                  v-model="form.ownerName"
                  placeholder="请输入业主名称"
                  clearable
                  size="small"
                  style="width: 200px"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        </el-form>
        <el-table
          :data="typeList"
          stripe
          style="width: 100%">
          <el-table-column
            prop="ownerName"
            label="业主姓名"
            width="120">
          </el-table-column>
          <el-table-column
            prop="houseName"
            label="房产信息"
            width="120">
          </el-table-column>
          <el-table-column
            prop="premiseName"
            label="小区名"
            width="120">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="签约日期"
            width="120">
          </el-table-column>
          <el-table-column
            label="操作"
            width="120">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">选中</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="form.pageNum"
          :limit.sync="form.pageSize"
          @pagination="getList"
        />
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </el-tabs>
  </div>
</template>

<script>
  // import {listEienaar } from "@/api/housing/eienaar";
  import {saveContrat,printlist,wordList } from "@/api/houseClosing/contract";
  import { listTermination,addTermination} from "@/api/houseClosing/termination";
  let Base64 = require('js-base64').Base64
  export default {
    name: "index",
    data() {
      return {
        imageUrl: '',
        imageUrl2: '',
        imageUrl3: '',
        activeName: 'first',
        statusOptions:[],
        queryForm:{},
        total:0,
        resultPrice:0,
        flag:1,
        typeList:[],
        dialogTableVisible: false,
        dialogFormVisible: false,
        formLabelWidth: '200px',
        ruleForm: {
          sfFinalStatementDetailList:[],
          sfFinalStatementDetailLists:[],
        },
        sfs1:[],
        sfs2:[],
        form:{
          pageNum: 1,
          pageSize: 10,
          ownerName: undefined,
          premiseName: undefined,
        },
        rules: {
          id: [
            { required: true, message: '请输入收房合同编号', trigger: 'blur' },
          ],
          sfContractNo: [
            { required: true, message: '请输入合同编号', trigger: 'blur' },
          ],
          houseName: [
            { required: true, message: '请选择房产信息', trigger: 'change' }
          ],
          cqAddress: [
            {  required: true, message: '产权地址', trigger: 'change' }
          ],
          houseZsNo: [
            {  required: true, message: '请输入证书编号', trigger: 'change' }
          ],
          ownerMobile: [
            {  required: true, message: '请输入业主联系方式', trigger: 'change' }
          ],
          ownerName: [
            { required: true, message: '请输入业主姓名', trigger: 'change' }
          ],
          signUserName: [
            { required: true, message: '请输入签约人姓名', trigger: 'blur' }
          ],
          signUserMobile: [
            { required: true, message: '请输入签约人电话', trigger: 'blur' }
          ],
          wyjgDate: [
            {  required: true, message: '请输入物业交割日期', trigger: 'blur' }
          ],
          terminationType: [
            { required: true, message: '请输入解约类型', trigger: 'blur' }
          ]
        },

      };
    },
    methods: {
      //解约合同
      handleAvatarSuccess(res, file) {
        this.imageUrl = res;
        console.log(file);
        console.log(res);
      },
      //物业交割单图片上传
      handleAvatarSuccess2(res, file) {
        this.imageUrl2 = res;
        console.log(file);
        console.log(res);
      },
      //其他图片上传
      handleAvatarSuccess3(res, file) {
        this.imageUrl3 = res;
        console.log(file);
        console.log(res);
      },
      //应退动态表单添加
      addDomain() {
        this.sfs1.push({
          value:'',
          key:Date.now()
        })
      },
      //应收动态表单添加
      addDomains() {
        this.sfs2.push({
          value:'',
          key:Date.now()
        })
      },

      returnpriceCount(price,index){
        this.resultPrice =0;
        let shou = 0;
        let tui = 0;
        let count1 = this.sfs1.length;
        let count2 = this.sfs2.length;
        for (let i = 0; i < count1; i++) {
          shou = Number(shou) + Number(this.sfs1[i].amount);
        }
        for (let i = 0; i < count2; i++) {
          tui = Number(tui) + Number(this.sfs2[i].amount);
        }
        this.resultPrice = (Number(shou) - Number(tui));
        this.flag=this.resultPrice<0 ? 2:1;
        this.resultPrice = this.resultPrice.toFixed(2);

      },

      getpriceCount(price,index){
        this.resultPrice =0;
        let shou = 0;
        let tui = 0;
        let count1 = this.sfs1.length;
        let count2 = this.sfs2.length;
        for (let i = 0; i < count1; i++) {
          shou = Number(shou) + Number(this.sfs1[i].amount);
        }
        for (let i = 0; i < count2; i++) {
          tui = Number(tui) + Number(this.sfs2[i].amount);
        }
        this.resultPrice = (Number(shou) - Number(tui));
        this.flag=this.resultPrice<0 ? 2:1;
        this.resultPrice = this.resultPrice.toFixed(2);
      },
      //删除动态添加框
      removeDomain(item) {
        this.resultPrice = Number(this.resultPrice)-Number(item.amount);
        this.flag=this.resultPrice<0 ? 2:1;
        this.resultPrice = this.resultPrice.toFixed(2);
        let index = this.sfs1.indexOf(item)
        if (index !== -1) {
          this.sfs1.splice(index, 1)
        }

      },
      //删除动态添加框
      removeDomains(item) {
        this.resultPrice = Number(this.resultPrice)+Number(item.amount);
        this.flag=this.resultPrice<0 ? 2:1;
        this.resultPrice = this.resultPrice.toFixed(2);
        let index = this.sfs2.indexOf(item)
        if (index !== -1) {
          this.sfs2.splice(index, 1)
        }
      },
      handleClick(row) {
        console.log(row);
        this.ruleForm = row;
        this.dialogFormVisible=false;
      },
      /** 取消操作 */
      submitForm(formName) {
        this.sfs1=[];
        this.sfs2=[];
        this.resultPrice=0;
        this.ruleForm={
          sfFinalStatementDetailList:[],
          sfFinalStatementDetailLists:[]
        };
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.form.pageNum = 1;
        //查询收房合同
        this.getList();
      },
      getList() {
        listTermination(this.form).then(response => {
          console.log(response)
          this.typeList = response.rows
          this.total = response.total;
        });
      },
      //保存成功后跳转
      baocun(){
        this.ruleForm.sfFinalStatementDetailList=this.sfs1;
        this.ruleForm.sfFinalStatementDetailLists=this.sfs2;
        this.ruleForm.imageUrl = this.imageUrl;
        this.ruleForm.imageUrl2 = this.imageUrl2;
        this.ruleForm.imageUrl3 = this.imageUrl3;
        this.ruleForm.shouOrTui = this.flag;
        this.ruleForm.jyMoney = this.resultPrice;
        addTermination(this.ruleForm).then(response => {
          this.$message("录入成功");
        })
        this.$router.push("/shoufang/contract");
      },

      resetForm(formName) {
        this.$refs[formName].validate((valid)=>{
          if(!valid){
            this.$message("填写必要信息");
            console.log('error submit!!');
            return false;
          }
          this.activeName='second'
        })

      },
      shangForm(){
        this.activeName="first"
      },
      //查询弹出框
      chaxun(){
        this.form = {
          pageNum: 1,
          pageSize: 5,
          ownerName: undefined,
          premiseName: undefined,
        };
        //查询收房合同
        this.getList();
        this.dialogFormVisible=true;
      }
    },
    save(){
      console.log(this.form)
    },

    created() {
      this.getList();
    }
  }
</script>

<style scoped>
  .spans{
    width: 1000px;
    border: solid 1px #ddd;
    margin-left: 48px;
    border-bottom: none;
    margin-bottom: -10px;
    border-top: solid 5px #ffa800;
    padding: 7px 0px;
    margin-top: 40px;
    font-family: "Microsoft Himalaya";
  }
  .line {
    height: 20px;
    width: 5px;
    border-radius: 10px;
    background: orange;
    display: inline-block;
    margin-right: 10px;
    margin-left: 10px;
    position: relative;
    top: 4px;
  }
  .div{
    border:1px solid #bfcbd9;
    margin: auto;
  }
  .fc{
    font-size: 20px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
